<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>网页字体、选项卡、换皮肤</title>
    <link href="../css/bootstrap-3.3.6.min.css" rel="stylesheet">
    <link href="../css/skin_0.css" rel="stylesheet" id="skinCss">
    <script src="../js/jquery-2.2.0.js"></script>
    <script src="../js/jquery.cookie-1.4.1.js"></script>

    <style>
        body {
            font-family: "微软雅黑";
            font-size: 1.6em;
            /*color: #02177c;*/
            /*background: #b3d6ff;*/
        }
        a, .glyphicon {
            cursor: pointer;
            margin-right: 5px;
        }
        h3{
            text-align: center;
        }
        textarea{
            width: 100%;
            height: 300px;
        }
        .highLight{
            /*color: #fffd00;*/
            background: #ffc1ab;
        }
        .hover{
            background: #ffe6e1;
        }
        #tabCard ul li{
            cursor: pointer;
            float: left;
            list-style: none;
            border: #3c473e 1px solid;
            border-bottom: none;
            margin-right: 3px;
            padding: 3px 5px 2px;
            /*background: #c9e8ee;*/
        }
        .tabCardContent{
            margin-top: 25px;
            border: #476f93 3px outset;
            background: #ffc1ab;
            padding: 5px;
        }
        #background{
            height: 50px;
            width: auto;
            background: white;
        }
        #skin ul{

        }
        #skin ul li{
            cursor: pointer;
            float: left;
            list-style: none;
            /*border: #3c473e 1px solid;*/
            /*border-bottom: none;*/
            margin-top: 10px;
            margin-right: 3px;
            padding: 3px 5px 2px;
            /*background: #c9e8ee;*/
        }

        #skin_0{
            background: #b3d6ff;
        }
        #skin_1{
            background: #ffbec5;
        }
        #skin_2{
            background: #edc0ff;
        }
        #skin_3{
            background: #ceffbb;
        }
        #skin_4{
            background: #dddddd;
        }
        .selected{
            position: relative;
            border:#ff8712 inset 5px;
            top: -5px;
            left: 5px;
        }
    </style>
</head>
<body>
<div class="container">
    <br>
    <h1>表单应用</h1>
    <hr>
    <br>
    <h3>网页字体的缩放</h3>
    <div class="row" id="fontSize">
        <div class="col-md-6 col-md-offset-3">
            <div class="form-group">
                <button class="btn btn-primary" id="bigger">字体放大</button>
                <button class="btn btn-primary" id="smaller">字体缩小</button>
            </div>
            <textarea>早期工作
1900年，爱因斯坦从苏黎世工业大学毕业。由于他对某些功课不热心，以及对老师态度冷漠，被拒绝留校。他找不到工作，靠做家庭教师和代课教师过活。在失业一年半以后，关心并了解他才能的同学马塞尔·格罗斯曼向他伸出了援助的手。格罗斯曼设法说服自己的父亲把爱因斯坦介绍到瑞士专利局去作一个技术员。

爱因斯坦终身感谢格罗斯曼对他的帮助。在悼念格罗斯曼的信中，他谈到这件事时说，当他大学毕业时，“突然被一切人抛弃，一筹莫展的面对人生。他帮助了我，通过他和他的父亲，我后来才到了哈勒(时任瑞士专利局局长)那里，进了专利局。这有点象救命之恩，没有他我大概不致于饿死，但精神会颓唐起来。”

1902年2月21日，爱因斯坦取得了瑞士国籍，并迁居伯尔尼，等待专利局的招聘。1902年6月23日，爱因斯坦正式受聘于专利局，任三级技术员，工作职责是审核申请专利权的各种技术发明创造。1903年，他与大学同学米列娃·玛丽克结婚。

1900年－1904年，爱因斯坦每年都写出一篇论文，发表于德国《物理学杂志》。头两篇是关于液体表面和电解的热力学，企图给化学以力学的基础，以后发现此路不通，转而研究热力学的力学基础。1901年提出统计力学的一些基本理论，1902年－1904年间的三篇论文都属于这一领域。

1904年的论文认真探讨了统计力学所预测的涨落现象，发现能量涨落取决于玻尔兹曼常数。它不仅把这一结果用于力学体系和热现象，而且大胆地用于辐射现象，得出辐射能涨落的公式，从而导出维恩位移定律。涨落现象的研究，使他于1905年在辐射理论和分子运动论两方面同时做出重大突破。 </textarea>
        </div>
    </div>
    <h3>选项卡切换</h3>
    <div class="row" id="tabCard">
        <div class="col-md-6 col-md-offset-3">
            <ul>
                <li class="highLight">钢琴</li>
                <li>吉他</li>
                <li>风琴</li>
                <li>铜管</li>
            </ul>
            <div>
                <div class="tabCardContent">
                    钢琴（意大利语：pianoforte）是西洋古典音乐中的一种键盘乐器，有“乐器之王”的美称。由88个琴键（52个白键，36个黑键）和金属弦音板组成。
                    意大利人巴托罗密欧·克里斯多佛利（Bartolomeo Cristofori，1655-1731）在1709年发明了钢琴。
                    钢琴音域范围从A2（27.5Hz）至 c5（4186Hz），几乎囊括了乐音体系中的全部乐音，是除了管风琴以外音域最广的乐器。
                    钢琴普遍用于独奏、重奏、伴奏等演出，作曲和排练音乐十分方便。演奏者通过按下键盘上的琴键，牵动钢琴里面包着绒毡的小木槌，继而敲击钢丝弦发出声音。
                    钢琴需定时的护理，来保证它的音色不变。
                </div>
                <div class="tabCardContent" hidden>
                    吉他（意大利语：Chitarra），又译为结他或六弦琴。是一种弹拨乐器，通常有六条弦，形状与提琴相似。
                    吉他在流行音乐、摇滚音乐、蓝调、民歌、佛朗明哥中，常被视为主要乐器。而在古典音乐的领域里，吉他常以独奏或二重奏的型式演出；
                    当然，在室内乐和管弦乐中，吉他亦扮演着相当程度的陪衬角色。
                    古典吉他与小提琴、钢琴并列为世界著名三大乐器。
                </div>
                <div class="tabCardContent" hidden>
                    广义上说，风琴是一个乐器类别，不论什么样的风琴，都有着共同的发声原理。风琴属于管簧乐器，
                    它利用某种动力（有机器的，或人力的等等），使气流吹过制好的各种不同长度的音管，发出乐音。
                    狭义上说，常见的风琴，那是一种外形类似立式钢琴，通过脚下的大踏板送风，配合双手键盘弹奏的一种乐器。踏板鼓风进入风道，如果不弹奏，则整个风道是密闭的，
                    当手指按下某琴键后，该键对应的音管的管塞打开，气流通过，吹响音管，则发出一个乐音。风琴基本就是这样出声的。
                    其实这种像是钢琴的风琴已经不多见。现在我们日常生活中最常见的风琴，是手风琴。它的发声原理和上述相同，只不过通过双手拉动风箱供气而已。
                </div>
                <div class="tabCardContent" hidden>
                    多数人认为，被称为铜管乐器的乐器，应该是由乐器所发出的声音来决定，而不管乐器是否是由金属做成的。因此，有的时候会发现
                    铜管乐器
                    铜管乐器
                    用木头制成的铜管乐器，像Alphorn、Cornett、以及Serpent，也有许多木管乐器是由金属做成，例如萨克管。
                    铜管乐器的前身大多是军号和狩猎时用的号角。在早期的交响乐中使用铜管的数量不大。在很长一段时期里，交响乐队中只用两只圆号，
                    有时增加一只小号到十九世纪上半叶，铜管乐器才在交响乐队中被广泛使用。铜管乐器的发音方式与木管乐器不同，
                    它们不是通过缩短管内的空气柱来改变音高，而是依靠演奏者唇部的气压变化与乐器本身接通“附加管”的方法来改变音高。
                    所有铜管乐器都装有形状相似的圆柱形号嘴，管身都呈长圆锥形状。铜管乐器的音色特点是雄壮、辉煌、热烈，
                    虽然音质各具特色，但宏大、宽广的音量为铜管乐器组的共同特点，这是其它类别的乐器所望尘莫及的。
                </div>
            </div>
        </div>
    </div>
    <h3>背景皮肤更换</h3>
    <div class="row" id="skin">
        <div class="col-md-6 col-md-offset-3">
            <b>请选择皮肤的颜色</b>
            <div class="" id="background">
                <ul>
                    <li id="skin_0" title="天蓝色" class="selected">天蓝</li>
                    <li id="skin_1">粉红</li>
                    <li id="skin_2">淡紫</li>
                    <li id="skin_3">草绿</li>
                    <li id="skin_4">灰色</li>
                </ul>
            </div>
        </div>
    </div>
    <div style="height: 500px"></div>
</div>
<script>
$(function () {
//    字体大小
    var $textarea = $("#fontSize textarea");
    $("#fontSize button").click(function(){
        var unit = $textarea.css("font-size").slice(-2);
        var fontSize = parseInt($textarea.css("font-size"),10)
        if(this.id == "bigger" && fontSize < 22){
            $textarea.css("font-size","+=2"+unit);
        }else if(this.id == "smaller" && fontSize > 8){
            $textarea.css("font-size","-=2"+unit);
        }
    });

//    选项卡切换
    $("#tabCard ul li").click(function(){
        var index = $("#tabCard ul li").index(this);
        $(this).addClass("highLight")
                .siblings().removeClass("highLight");
        $("div.tabCardContent").eq(index).show()
                .siblings().hide();
    }).hover(function(){
        $(this).addClass("hover");
    },function(){
        $(this).removeClass("hover");
    });

//    皮肤换色
    $("#skin ul li").click(function(){
        skinSwitch(this.id);
    })
    var MyCssSkin = $.cookie("MyCssSkin");
    if(MyCssSkin){
        skinSwitch(MyCssSkin);
    }
})

function skinSwitch(skinId){//    皮肤换色函数
    $("#"+skinId).addClass("selected")
            .siblings().removeClass("selected");
    $("#skinCss").attr("href","../css/"+skinId+".css");
    $.cookie("MyCssSkin",skinId,{path:"/",expires:10});
}
</script>
<!--<div style="background: rgba(164, 255, 169, 0.34)">.</div>-->
</body>
</html>